<template>
    <Center>
        <div class="p-8" style="height: 100%;">
            <div class="text-gray-700 font-bold">排行榜</div>
            <el-row class="mt-4">
                <el-col @click="onClick('soarList')" :span="6" class="p-3 pointer">
                    <el-row style="height: 100%;">
                        <el-col :span="12" style="position: relative;" class=" flex justify-center items-center">
                            <el-image :src="bs" class="rounded" style="width:100px;height:100px;" />
                            <div class="center-text flex justify-center items-center text-white">飙升榜</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="text-gray-700">飙升榜</div>
                            <div class="mt-2 text-gray-500 text-sm" v-for="(item, index) in soarList.slice(0, 3)" :key="index">
                                <el-space>
                                    <span>{{index+1}}</span>
                                    <span>{{item.title}}</span>
                                </el-space>
                            </div>
                            
                        </el-col>
                    </el-row>
                </el-col>

                <el-col @click="onClick('topList')" :span="6" class="p-3 pointer">
                    <el-row style="height: 100%;">
                        <el-col :span="12" style="position: relative;" class=" flex justify-center items-center">
                            <el-image :src="top" class="rounded" style="width:100px;height:100px;" />
                            <div class="center-text flex justify-center items-center text-white">TOP50</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="text-gray-700">TOP50</div>
                            <div class="mt-2 text-gray-500 text-sm" v-for="(item, index) in topList.slice(0, 3)" :key="index">
                                <el-space>
                                    <span>{{index+1}}</span>
                                    <span>{{item.title}}</span>
                                </el-space>
                            </div>
                            
                        </el-col>                        
                    </el-row>
                </el-col>

                <el-col @click="onClick('lxList')" :span="6" class="p-3 pointer">
                    <el-row style="height: 100%;">
                        <el-col :span="12" style="position: relative;" class=" flex justify-center items-center">
                            <el-image :src="lx" class="rounded" style="width:100px;height:100px;" />
                            <div class="center-text flex justify-center items-center text-white">流行榜</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="text-gray-700">流行榜</div>
                            <div class="mt-2 text-gray-500 text-sm" v-for="(item, index) in lxList.slice(0, 3)" :key="index">
                                <el-space>
                                    <span>{{index+1}}</span>
                                    <span>{{item.title}}</span>
                                </el-space>
                            </div>                            
                        </el-col>                        
                    </el-row>
                </el-col>


                <el-col @click="onClick('hotList')" :span="6" class="p-3 pointer">
                    <el-row style="height: 100%;">
                        <el-col :span="12" style="position: relative;" class=" flex justify-center items-center">
                            <el-image :src="dj" class="rounded" style="width:100px;height:100px;" />
                            <div class="center-text flex justify-center items-center text-white">热播榜</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="text-gray-700">热播榜</div>
                            <div class="mt-2 text-gray-500 text-sm" v-for="(item, index) in hotList.slice(0, 3)" :key="index">
                                <el-space>
                                    <span>{{index+1}}</span>
                                    <span>{{item.title}}</span>
                                </el-space>
                            </div>
                        </el-col>                        
                    </el-row>
                </el-col>

                <el-col @click="onClick('hotList')" :span="6" class="p-3 pointer">
                    <el-row style="height: 100%;">
                        <el-col :span="12" style="position: relative;" class=" flex justify-center items-center">
                            <el-image :src="dy" class="rounded" style="width:100px;height:100px;" />
                            <div class="center-text flex justify-center items-center text-white">抖音热歌榜</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="text-gray-700">抖音热歌榜</div>
                            <div class="mt-2 text-gray-500 text-sm" v-for="(item, index) in hotList.slice(0, 3)" :key="index">
                                <el-space>
                                    <span>{{index+1}}</span>
                                    <span>{{item.title}}</span>
                                </el-space>
                            </div>
                        </el-col>                        
                    </el-row>
                </el-col>

                <el-col @click="onClick('hotList')" :span="6" class="p-3 pointer">
                    <el-row style="height: 100%;">
                        <el-col :span="12" style="position: relative;" class=" flex justify-center items-center">
                            <el-image :src="ks" class="rounded" style="width:100px;height:100px;" />
                            <div class="center-text flex justify-center items-center text-white">快手热歌榜</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="text-gray-700">快手热歌榜</div>
                            <div class="mt-2 text-gray-500 text-sm" v-for="(item, index) in hotList.slice(0, 3)" :key="index">
                                <el-space>
                                    <span>{{index+1}}</span>
                                    <span>{{item.title}}</span>
                                </el-space>
                            </div>
                        </el-col>                        
                    </el-row>
                </el-col>

                <el-col @click="onClick('hotList')" :span="6" class="p-3 pointer">
                    <el-row style="height: 100%;">
                        <el-col :span="12" style="position: relative;" class=" flex justify-center items-center">
                            <el-image :src="fn" class="rounded" style="width:100px;height:100px;" />
                            <div class="center-text flex justify-center items-center text-white">峰鸟流行音乐榜</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="text-gray-700">峰鸟流行音乐榜</div>
                            <div class="mt-2 text-gray-500 text-sm" v-for="(item, index) in hotList.slice(0, 3)" :key="index">
                                <el-space>
                                    <span>{{index+1}}</span>
                                    <span>{{item.title}}</span>
                                </el-space>
                            </div>
                        </el-col>                        
                    </el-row>
                </el-col>

                <el-col @click="onClick('hotList')" :span="6" class="p-3 pointer">
                    <el-row style="height: 100%;">
                        <el-col :span="12" style="position: relative;" class=" flex justify-center items-center">
                            <el-image :src="zy" class="rounded" style="width:100px;height:100px;" />
                            <div class="center-text flex justify-center items-center text-white">综艺新歌</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="text-gray-700">综艺新歌</div>
                            <div class="mt-2 text-gray-500 text-sm" v-for="(item, index) in hotList.slice(0, 3)" :key="index">
                                <el-space>
                                    <span>{{index+1}}</span>
                                    <span>{{item.title}}</span>
                                </el-space>
                            </div>
                        </el-col>                        
                    </el-row>
                </el-col>                
            </el-row>
            <div class="text-gray-700 font-bold mt-4">新歌榜</div>
            <el-row class="mt-4">
                <el-col @click="onClick(item)" :span="6" class="p-3 pointer" v-for="(item, index) in newRank" :key="index">
                    <el-row style="height: 100%;">
                        <el-col :span="12" style="position: relative;" class=" flex justify-center items-center">
                            <el-image :src="baseUrl + item.image" class="rounded" style="width:100px;height:100px;" />
                            <div class="center-text flex justify-center items-center text-white"></div>
                        </el-col>
                        <el-col :span="12">
                            <div class="text-gray-700">{{item.name}}</div>
                            <div class="mt-2 text-gray-500 text-sm" >
                                <el-space v-for="(e, i) in item.music_list" :key="i">
                                    <span>{{i+1}}</span>
                                    <span>{{e.title}}</span>
                                </el-space>
                            </div>                            
                        </el-col>
                    </el-row>                    
                </el-col>
                
            </el-row>
        </div>
    </Center>
</template>
<script setup>
import bs from "@/assets/top/1.webp";
import top from "@/assets/top/2.webp";
import lx from "@/assets/top/3.webp";
import dj from "@/assets/top/4.webp";
import dy from "@/assets/top/5.webp";
import ks from "@/assets/top/6.webp";
import fn from "@/assets/top/7.webp";
import zy from "@/assets/top/8.webp";
import Center from '../../components/common/Center.vue'
import { useRouter } from 'vue-router';
import { ref, onMounted } from "vue";
import {  indexRank , newMusicRank} from "@/http/api";
import { PersistentStore } from "@/stores";
const persistentStore = PersistentStore();
const router = useRouter();
const baseUrl = import.meta.env.VITE_API_URL;
const downloadList = ref([]);
const hotList = ref([]);
const newList = ref([]);
const soarList = ref([]);
const topList = ref([]);
const userList = ref([]);
const lxList = ref([]);
const djList = ref([]);
const newRank = ref([]);

onMounted(() => {
  getRank();
  getNewMusicRank();
});

const getNewMusicRank = async () => {
  const { data } = await newMusicRank();
  newRank.value = data;
};

const getRank = async () => {
  const { data } = await indexRank();
  downloadList.value = data.download;
  hotList.value = data.hot;
  newList.value = data.new;
  soarList.value = data.soar;
  topList.value = data.top;
  userList.value = data.user;
  lxList.value = data.lx;
  djList.value = data.dj;
};


const onClick = function (e) {    
    const url = router.resolve("/billboard/list");
    if(e == 'soarList'){
        var arr = { id: "", index: e, list: soarList.value };
    }else if(e == 'topList'){
        var arr = { id: "", index: e, list: topList.value };
    }else if(e == 'lxList'){
        var arr = { id: "", index: e, list: lxList.value };
    }else if(e == 'hotList'){
        var arr = { id: "", index: e, list: hotList.value };
    }else{
        console.log(e);
        var arr = { id: "", index: e, list: e.music_list };
    }
    
    persistentStore.setSongListInfo(arr);      
    window.open(url.href, url.href).postMessage(JSON.stringify(arr));
}
</script>
<style scoped>
.center-text {
    position: absolute;
    width: 100%;
    height: 100%;
}
</style>